2024-01-12 Day 1 JavaScript講座 前編
講師
watanabe.icon 渡邉
タイムテーブル
10:00 はじめに
10:15 Web開発入門
12:00 〜お昼休み〜
13:00 Web開発入門
16:00 Webの仕組み
17:00 解散
ゴール
実際にWebサイトを作ってWebの仕組みを理解しよう
https://scrapbox.io/files/657bfdfdc3f3750024dee872.png
用意していただくもの
パソコン
Google Chrome または Microsoft Edge がインストールされたパソコン
インターネット接続
(Wi-Fi接続情報は会場でご案内します)
Scrapbox
気になること・質問・コードの共有・メモなど自由にご利用ください
Scrapboxでは同一ページを複数人でリアルタイムに共同編集できます
利用にはGoogleアカウントが必要です
Step1: Scrapboxにアクセスします
"2024-01-12 Day 1 JavaScript講座 前編" を選択
Step2: 参加URLにアクセスしアカウントを作成します
参加URL
"Log in with Google" を選択
Googleアカウントでログイン
アカウントを作成する方法
Step3: 自由に編集してみよう！
どのページも自由に編集できます 👌
Scrapbox
気になること・質問・コードの共有・メモなど自由にご利用ください
あるいは会場で直接スタッフに声をかけてもらって構いません 👌
(例2) 自分のメモを公開したい場合 → 上の https://scrapbox.io/files/657c04c5224e6200237be5f4.png new から新しいページを追加します Web開発入門
こちらの資料で進めます
完成をイメージする
例: https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png
画像ファイル
Webサイトに使用する画像をコンピューターに保存します
例えば
自分やペットの写真
イラスト
無料・利用回数制限あり
画像生成にはMicrosoft アカウントが必要
Android
iOS
画像生成は ChatGPT Plus USD $20/月 〜
保存するには
画像を右クリック > 名前をつけて保存
テキストエディター
例えば
資料 > ファイルの扱い
ファイル名
ファイルパス
資料 > HTMLの基本
要素
見出し: h1, h2, h3, h4
段落: p
順序なしリスト: ul
順序付きリスト: ol
画像: img
資料 > CSSの基本
文字の色: color
背景の色: background-color
文字の大きさ: font-size
テキストの配置: text-align
幅: width
例: 画像の横幅を親のボックスの横幅一杯まで広げる
code:css
img {
width: 100%;
}
余白
https://kou029w.github.io/intro-to-web-dev/get-started/css-basics/box-model.png
例: 本文(body要素)の横幅を600pxに指定し、中央に配置する
code:css
body {
width: 600px;
margin: 0 auto;
}
例: 画像を中央に配置する
code:css
img {
display: block;
margin: 0 auto;
}
資料 > JavaScriptの基本
データ型
文字列
数値
論理型
配列
オブジェクト
変数
let <変数名> = <代入する値>;
const <変数名> = <代入する値>;
コメント
演算子
条件文
関数
イベント
資料 > Web